<?php 
session_start();
include("db_connect.php")
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Basciautosales store the place where you can buy trade set build your own dream cars at its your ways" />
<meta name="description" content="Basciautosales store the place where you can buy trade set build your own dream cars at its your ways" />
<title>Trade In</title>
<?php 
include("include/jquery.php");
if(isset($_GET['status'])){
		if($_GET['status'] == "success"){
			echo '
				<script>
					alert("Basciautosales will verify your request");
				</script>
			';
		
		}
		else{
		echo '
				<script>
					alert("Something went wrong please try again");
				</script>
			';
		}
		
	}

?>


<script type="text/javascript">
 var limiter = 0;
var imgsrc = "images/steps/";

$(document).ready(function () {
$(".step2").hide();
$(".step3").hide();
$(".step4").hide();
$(".step5").hide();
$(".step6").hide();
$("#registerButton").hide();

$("#tostep2, #tostep3, #tostep4, #tostep5").click(function () {	return false;});
$("#bstep1, #bstep2, #bstep3, #bstep4").click(function () {	return false;});

$("#bstep1").click(function (){
	$("#img2").attr("src" ,  imgsrc + "step2d.png" ); 
	$(".step2").hide();
	$(".step1").show();
	
});

$("#bstep2").click(function (){
	$("#img3").attr("src" ,  imgsrc + "step3d.png" ); 
	$(".step3").hide();
	$(".step2").show();
	
});

$("#bstep3").click(function (){
	$("#img4").attr("src" ,  imgsrc + "step4d.png" ); 
	$(".step4").hide();
	$(".step3").show();
	
});

$("#bstep4").click(function (){
	$("#img5").attr("src" ,  imgsrc + "finishc.png" ); 
	$(".step5").hide();
	$(".step4").show();
	
});

$("#bstep5").click(function (){
	$("#img5").attr("src" ,  imgsrc + "finishc.png" ); 

});


$("#tostep2").click(function () {
	var fname = $("#fname");
	var lname = $("#lname");
	var contact = $("#contact");
	var email = $("#email");
	
	if (fname.val() == " "|| fname.val() =="" ){
		alert("Please input your First name!");
		fname.focus();
	}
	else if (lname.val() == " "|| lname.val() =="" ){
		alert("Please input your Last name!");
		lname.focus();
	}
	else if (contact.val() == " "|| contact.val() =="" ){
		alert("Please input your contact no.!");
		contact.focus();
	}
	else if (email.val() == " "|| email.val() =="" ){
		alert("Please input your email!");
		email.focus();
	}
	else if(!isValidEmail( email.val() ) ){
			alert("Please Input a Valid Email")
			email.focus();
	}
	else{
		$("#img2").attr("src" ,  imgsrc + "step2b.png" ); 
		$(".step1").hide();
		$(".step2").show();
	}

});

$("#tostep3").click(function () {
	var types = $("#atypes");
	var brand = $("#abrand");
	var model = $("#amodel");
	var name =  $("#name");
	
	if(types.val() == "Select" || types.val() == "" ){
		alert("Please Select a Type!");
		types.focus();
	}
	else if(brand.val() == ""){
		alert("Please Select a Brand!");
		brand.focus();
	}
	else if(model.val() == ""  ){
		alert("Please Select a Model!");
		model.focus();
	}
	else if(name.val() =="" || name.val()== " " ){
		alert("Please Input a name for your item!");
		name.focus();
	}
	else{
		
		$("#img3").attr("src" ,  imgsrc + "step3b.png" ); 
		$(".step2").hide();
		$(".step3").show();
	
	}
	
});

$("#tostep4").click(function () {
var description = $("#description");
var color = $("#color");
var fuel = $("#fuel");
var modeofpayment = $("#modeofpayment");

if(description.val() =="" || description.val() == " "){
	alert("Please add description to your car");
	description.focus();
}
else if(color.val() =="" || color.val() == " "){
	alert("Please select a color");
	color.focus();
}
else if(fuel.val() =="" || fuel.val() == " "){
	alert("Please select a fuel");
	fuel.focus();
}
else if(modeofpayment.val() =="" || modeofpayment.val() == " "){
	alert("Please select a mode of payment");
	modeofpayment.focus();
}
else{
		$("#img4").attr("src" ,  imgsrc + "step4b.png" ); 
		$(".step3").hide();
		$(".step4").show();
}
	
	
});

$("#tostep5").click(function () {
var transmission = $("#transmission");
var year = $("#year"); 
var price = $("#price");
var quantity = $("#quantity");

if(transmission.val() ==  "Select Transmission" || transmission.val() ==  ""){
alert("Select transmission");
transmission.focus();

}
else if(year.val() ==  "Select" || year.val() ==  ""){
alert("Select year");
year.focus;

}
else if(price.val() ==  "" || price.val() == " "){
alert("Please input quantity");
price.focus();

}
else if(quantity.val() ==  ""|| quantity.val() ==  " "){
alert("Please input quantity");
quantity.focus();

}

else{
	$("#img5").attr("src" ,  imgsrc + "finishb.png" ); 
		$(".step4").hide();
		$(".step5").show();
}
	
});




    $("#contact").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
	
	 $("#quantity").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
	
	 $("#price").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });


$("#addbrand").change(function () {
		model = $("#src_model").val();
		fname = $("#searchFname").val();
		lname = $("#searchLname").val();	
		brand = $(this).attr("value");
		var model2="model";
		if(brand == "select"){
			brand=="";
		}
		
		$("#add_model").empty().load("profile/selection.php?command="+model2 +"&modelid="+brand);
		//$("#itemRequest").html(loader).load("admin/itemRequest.php?brand="+brand+"&model="+model+"&fname="+fname+"&lname="+lname);
		
});

$("#addpictures").click(function () {
		
		if(limiter <=6){
		
		var a = '</br> <div><img id="img_prev'+limiter+'" src="#"/></div><input type="file" name="image[]" id="image" onchange="readURL(this);"></br>'
		
		$("#addmorepicture").append(a);
		
		}
		else{
		alert("you can only upload 6 picture");
		}
		
		return false;
		
	});
$("#abrand").change(function () {
		var id = $(this).attr("value");
		var model="model";
		$("#amodel").empty().load("admin/selection.php?command="+model +"&modelid="+id);
	
	});
	


});

function isValidEmail(strEmail){
var validRegExp;
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
  // search email text for regular exp matches
    if (strEmail.search(validRegExp) == -1){
		return false;
    } 
    return true; 
}	

function readURL(input) {
	var b = '#img_prev'+limiter;
	
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$(b).attr('src', e.target.result).width(300).height(120);
			limiter++;
			$("#registerButton").show();
			$("#img5").attr("src" ,  imgsrc + "finish.png" ); 
		
		};
			reader.readAsDataURL(input.files[0]);
	}
}
</script>
</head>
<body> <div id=" msgbox"></div>
<div id="templatemo_wrapper">
	<!--header-->
		<?php include("include/header.php");?>
	<!--header-->
    
    <div id="templatemo_main">
   		<!--sidebar-->
		<div id="sidebar" class="float_l">
			<!--top-->
			<img src="images/news.png" />
			<div class="sidebar_box">
				   
                <div class="content"> 
                	<img src="images/facebook.png" />&nbsp; &nbsp; &nbsp; <a id="facebook "href="https://www.facebook.com/pages/Basci-Autosales/155885811108484?fref=ts" style="position: absolute;"><b>Visit us on Facebook</b></a>
					
				<br /><br />
				
				</div>
			</div>
        	<!--endtop-->
			
			<!--bottom-->
			<img src="images/online-shop.png" />
			<div class="sidebar_box">
				  
                <div class="content"> 
                	<p style="color:#6d7172;">Our shop offers you the opportunity to<br/> 
					high-quality products for<br/>
					purchase Basci Automobiles exclusively.</p>
					
					<a href="shop.php"><img src="images/shop-icon.png" /></a><br /><br />
				</div>
			</div>
        	<!--endbottom-->
			
	</div><!--siderbar-->
		
		
		
		<div id="trade-header">
		</div>
        <div id="content" class="float_r">
			<p style="font-size:14px;" >Please fill out some information about your self and your car. </p>
			<p style="font-size:14px;" >And our management will verify your requested item.</p>
			
			<table>
				<tr>
					<td>
						<div id="stepsbysteps">
							<ul style="padding-left: 25px;">
								<li><img id="img1" src="images/steps/step1a.png" style="margin-left:-7px;" /></li>
								<li><img id="img2" src="images/steps/step2d.png" style="margin-left:-7px;"/></li>
								<li><img id="img3" src="images/steps/step3d.png" style="margin-left:-7px;"/></li>
								<li><img id="img4" src="images/steps/step4d.png" style="margin-left:-7px;"/></li>
								<li><img id="img5" src="images/steps/finishc.png" style="margin-left:-8px;"/></li>
							</ul>
						</div>
					</td>
				</tr>
			</table>
			
            <div id="wrapper" style="font-size:14px;" align="Center">
						<div id="steps">
							<form id="formElem" name="formElem" action="scripts/guessdata.php" method="post" enctype="multipart/form-data">
							
							
								<fieldset class="step1">
								<legend>Your Information</legend>
								<p></p>
									<legend>Your First Name</legend>
									<p>
										<label for="Firstname"></label>
										<input id="fname" name="fname" type="text" AUTOCOMPLETE=OFF />
									</p>
									
									<p id="lname2">
									<legend>Your Lname Name</legend>
									
										<label for="Lastname"></label>
										<input id="lname" name="lname" type="text" AUTOCOMPLETE=OFF />
									</p>
									
									<p id="contact2">
										<legend>Your ContactNo.</legend>
										<label for="ContactNo"></label>
										<input id="contact" name="contact" type="text" AUTOCOMPLETE=OFF />
									</p>
									
									
									<p id="email2">
										<legend>Your Email</legend>
										<label for="Email"></label>
										<input id="email" name="email" type="text" AUTOCOMPLETE=OFF />
									</p>
										
										<button id="tostep2">Next</button>
									</fieldset>
									
									
									<fieldset class="step2">
									
									<p><button id="bstep1">Back</button></br></p>
									
									<legend>Brand and Model</legend>
									<p id="types">
										<legend>Types</legend>
										<label for="types"></label>
										<select id="atypes" value="types"  name="types">
										<?php 
											$sql = mysql_query("SELECT * FROM tbltypes");
											$opt2 = '<option id="opttype" name="none">Select</option> ';
											
											while($row = mysql_fetch_array($sql) ){
												$opt2 .= '<option id="opttype" value="'.$row["types"].'" >'.$row["types"].'</option>';
											}
											echo $opt2;
										?>
										</select>
										
										
									</p>
									
									<p id="abrand2">
										<legend>Brand</legend>
										<label for="brand"></label>
										<select id="abrand" value="brand" name="brand">
										<?php 
											$sql = mysql_query("SELECT * FROM tblbrand");
											$opt = '<option id="optbrand" name="none" value="">Select</option> ';
											while($row = mysql_fetch_array($sql) ){
												$opt .= '<option id="optbrand" name="'.$row["brand"].'" value="'.$row["id"].'" >'.$row["brand"].'</option>';
											}
											echo $opt;
										?>
										</select>
									</p>
									
									<p id="amodel2">
										<legend>Model</legend>
										<label for="Model"></label>
										<select id="amodel" value="model" name="model">
										
										</select>
										
									</p>
									
									<p id="name2">
										<legend>Item Name</legend>
										<label for="Name"></label>
										<input type="text" id="name" name="name" AUTOCOMPLETE=OFF />
									   
									</p>
									<button id="tostep3">Next</button>
								</fieldset>
								
								
								<fieldset class="step3">
								<button id="bstep2">Back</button></br>
									<legend>Additional Info</legend>
									<p id="description2">
										<legend>Description</legend>
										<label for="description"></label>
										<textarea style="width: 600px; height: 123px;" id="description" value="description" name="description"></textarea>
									</p>
									
									
									<p id="color2">
									<legend>Color</legend>	
										<label for="color"></label>
										<select id="color" name="color">
											<option value="">Select</option>
											<?php 
												$sql = mysql_query("SELECT * FROM tblcolor")or die(mysql_error());
												while($row = mysql_fetch_array($sql)){
													echo '<option value="'.$row['color'].'">'.$row['color'].'</option>';
												}
											
											?>
										
										</select>
									</p>
									
									
									
									<p id="fuel2" >
									<legend>Fuel</legend>
									  <label for="fuel" ></label>
										<select id = "fuel" name="fuel">
											<option value="">Select Fuel</option>
											<option value="Gasoline">Gasoline</option>
											<option value="Diesel">Diesel</option>
											<option value="Lpg">LPG</option>
											<option value="Hybrid">Hybrid</option>
											<option value="Electric">Electric</option>
										</select>
									</p>
									
									<p id="payment2" >
									<legend>Payment</legend>
									  <label for="payment" ></label>
										<select id = "modeofpayment" name="modeofpayment">
											<option value="">Select Payment</option>
											<option value="Cash">Cash</option>
											<option value="Installment">Installment</option>
											
										</select>
									</p>
									
									<button id="tostep4">Next</button>
								</fieldset>
								
								<fieldset class="step4">
								<button id="bstep3">Back</button>
									<legend>Description</legend>
									<p id ="transmission2">
									
									<legend for="transmission" >Transmission</legend>
										<select id = "transmission" name="transmission">
											<option value="">Select Transmission</option>
											<option value="Manual">Manual</option>
											<option value="Automatic">Automatic</option>
										</select>
									</p>
									<p id="year2">
										<legend for="year">Year</legend>
										<select id="year" name="year">
											<option value="">Select</option>
											<option>2006</option>
											<option>2007</option>
											<option>2008</option>
											<option>2009</option>
											<option>2010</option>
											<option>2011</option>
											<option>2012</option>
										</select>
									</p>
									<p id="price2">
										<legend for="price">Price</legend>
										<input id="price" name="price" type="number" AUTOCOMPLETE=OFF />
									</p>
									<p id="quantity2">
										<legend for="quantity">Quantity</legend>
										<input id="quantity" name="quantity" type="number" AUTOCOMPLETE=OFF />
									</p>
									<button id="tostep5">Next</button>
								</fieldset>
								
								
								<fieldset class="step5">
								<button id="bstep4">Back</button></br>
									<legend>Image</legend>
									<p id="addpictures2">
										
										<div id="addmorepicture">
											
										</div>
										<button id="addpictures">Add picture</button>
									</p>
								
									<legend>Confirm</legend>
									<p>
										Please fill up all the missing fields before you proceed
									</p>
									<p class="submit">
										<button id="registerButton" type="submit" name = "submit">Submit</button>
									</p>
								</fieldset>
							</form>
						</div>
						
					</div>
		</div>	
        <div class="cleaner"></div>
    </div> <!-- END of templatemo_main -->
    
     <!--footer-->
	<?php include("include/footer.php");?>
    
</div> <!-- END of templatemo_wrapper -->

</body>
</html>